<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .light{
            background-color :aliceblue;
            color:black;
            width:100%;
            height:100%;
        }
        .dark{
            background-color: black;
            color:white;
            width:100%;
            height:100%;
        }
        body,html{
            width:100%;
            height:100%;
        }
    </style>
</head>

<body>
    <input type="checkbox" class="all" onclick="selectall()" id="111"><label for="111">选择全部</label><br />
    <input type="checkbox" class="select" onclick="selectone()" id="112"><label for="112">选择1</label><br />
    <input type="checkbox" class="select" onclick="selectone()" id="113"><label for="113">选择2</label><br />
    <input type="checkbox" class="select" onclick="selectone()" id="114"><label for="114">选择3</label><br />
    <input type="checkbox" class="select" onclick="selectone()" id="115"><label for="115">选择4</label><br />


    <!-- <div style="font-size:10px" onclick="changesize()">哈啊哈</div> -->

    <div class="light" onclick="changestyle()">
        这是一段话<br>
        这是一段话<br>
        这是一段话<br>
        这是一段话<br>
        这是一段话<br>
        这是一段话<br>
    </div>


</body>
<script>
    function changestyle() {
        let tmp = document.querySelector('div')
        if (tmp.className == "light")//类名样式操作
            tmp.className = "dark"
        else
            tmp.className = "light"
    }





    // function changesize()
    // {
    //     let tmp=document.querySelector('div')
    //     let newsize=parseInt(tmp.style.fontSize)+10
    //     tmp.style.fontSize=newsize+"px"//只影响行内样式，不影响内部样式
    // }




    let all = document.querySelector('.all')
    let select = document.querySelectorAll('.select')
    function selectall()//点击选择全部则所有选项都会选上
    {
        for (i = 0; i < select.length; i++) {
            select[i].checked = all.checked
        }
    }
    function selectone() {
        all.checked = isselectall()
    }
    function isselectall() {
        for (i = 0; i < select.length; i++) {
            if (select[i].checked == false) return false;
        }
        return true;
    }
    // function selectone()//有一个取消，选择全部就会取消
    // {
    //     for(i=1;i<select.length;i++)
    //     {
    //         if(select[i-1].checked!=select[i].checked)
    //         {
    //             all.checked=false
    //             return false;
    //         }
    //     }
    //     all.checked=select[0].checked
    //     return true
    // }

</script>

</html>